abp框架学习笔记（三）

2023-11-15 23:17| 来源: 网络整理| 查看: 265

在API接口做好之后，需要在前端显示数据，这里使用的Angular框架来进行开发的。在开发前端之前需要先写本地化文件。本地化文件位于.Domain.Shared 项目的 Localization/项目名文件夹下，按照语种命名的json文件。英文是en.json，中文是zh-Hans.json。

{ "culture": "en", "texts": { "Menu:Home": "Home", "Welcome": "Welcome", "LongWelcomeMessage": "Welcome to the application. This is a startup project based on the ABP framework. For more information, visit abp.io.", "Menu:BookStore": "Book Store", "Menu:Books": "Books", "Actions": "Actions", "Close": "Close", "Delete": "Delete", "Edit": "Edit", "PublishDate": "Publish date", "NewBook": "New book", "Name": "Name", "Type": "Type", "Price": "Price", "CreationTime": "Creation time", "AreYouSure": "Are you sure?", "AreYouSureToDelete": "Are you sure you want to delete this item?", "Enum:BookType:0": "Undefined", "Enum:BookType:1": "Adventure", "Enum:BookType:2": "Biography", "Enum:BookType:3": "Dystopia", "Enum:BookType:4": "Fantastic", "Enum:BookType:5": "Horror", "Enum:BookType:6": "Science", "Enum:BookType:7": "Science fiction", "Enum:BookType:8": "Poetry" } }

在前端直接调用对应文字的定义即可实现多语言，如：[name]=“‘::Name’ | abpLocalization”。

在前端使用的是yarn工具来安装NPM包的，在 angular 目录下打开命令行窗口,选择 yarn 命令安装NPM包:

yarn

也可以在vscode中打开angular 目录，并运行终端，在终端中输入：yarn 在这里插入图片描述 ABP Angular前端应用程序时,需要使用一些工具: Ng Bootstrap 用做UI组件库。 ngx-datatable 用做 datatable 类库。

加载完所有的package，需要再生成基础页面，生成可以直接把对应模块的API接口生成到Angular项目的生成对应的文件夹 yarn ng generate module book [文件夹名] --module app --routing --route books 并在文件夹下生成对应的页面文件

> yarn ng generate module book --module app --routing --route books yarn run v1.19.1 $ ng generate module book --module app --routing --route books CREATE src/app/book/book-routing.module.ts (336 bytes) CREATE src/app/book/book.module.ts (335 bytes) CREATE src/app/book/book.component.html (19 bytes) CREATE src/app/book/book.component.spec.ts (614 bytes) CREATE src/app/book/book.component.ts (268 bytes) CREATE src/app/book/book.component.scss (0 bytes) UPDATE src/app/app-routing.module.ts (1289 bytes) Done in 3.88s.

book.module.ts页面是模块页面，创建BookModule 模块

import { NgModule } from '@angular/core'; import { SharedModule } from '../shared/shared.module'; import { BookRoutingModule } from './book-routing.module'; import { BookComponent } from './book.component'; @NgModule({ declarations: [BookComponent], imports: [ BookRoutingModule, SharedModule ] }) export class **BookModule** { }

app-routing.module.ts页面是路由页面，新建页面后需要在此文件中新增路由定义，指向book.module路径

const routes: Routes = [ // other route definitions... { path: 'books', loadChildren: () => import('./book/book.module').then(m => m.**BookModule**) }, ];

route.provider.ts页面中增加路由

function configureRoutes(routes: RoutesService) { return () => { routes.add([ { path: '/', name: '::Menu:Home', iconClass: 'fas fa-home', order: 1, layout: eLayoutType.application, }, { path: '/book-store', name: '::Menu:BookStore', iconClass: 'fas fa-book', order: 2, layout: eLayoutType.application, }, { path: '/books', name: '::Menu:Books', parentName: '::Menu:BookStore', layout: eLayoutType.application, }, ]); }; }

RoutesService 是ABP框架提供的用于配置主菜单和路由的服务 path 路由的URL。 name 菜单项的名称(本地化)。 iconClass 菜单项的图标(可以使用默认的Font Awesome图标)。 order 菜单项的排序。 layout BooksModule路由的布局. (有三个预定义的布局类型: eLayoutType.application, eLayoutType.account 或 eLayoutType.empty)。

页面好了后可以生成API的代理，ABP CLI 提供 generate-proxy 命令为HTTP APIs生成客户端代理。在生成代理前需要先运行host项目。可以在vs中选中.HttpApi.Host项目启动。在 angular 文件夹下运行以下命令：

abp generate-proxy -t ng

这个命令将在/src/app/proxy/books文件夹下产生以下文件： index.ts --注入 model.ts --参数 book.service.ts --api接口的调用

/src/app/book/book.component.ts文件内容

**import** { **ListService**, PagedResultDto } from '@abp/ng.core'; **import** { Component, OnInit } from '@angular/core'; **import** { **BookService**, **BookDto** } from '@proxy/books'; @Component({ selector: 'app-book', templateUrl: './book.component.html', styleUrls: ['./book.component.scss'], providers: [ListService], }) export class BookComponent implements OnInit { book = { items: [], totalCount: 0 } as PagedResultDto; constructor(public readonly list: ListService, private bookService: BookService) {} ngOnInit() { const bookStreamCreator = (query) => this.bookService.getList(query); this.list.hookToQuery(bookStreamCreator).subscribe((response) => { this.book = response; }); } }

ListService它是一个工具服务，提供了易用的分页，排序和搜索。

/src/app/book/book.component.html为页面展示

{{ '::Menu:Books' | abpLocalization }} {{ '::Enum:BookType:' + row.type | abpLocalization }} {{ row.publishDate | date }} {{ row.price | currency }}

至此，简单的列表展示完成。想要查看完整效果，可以运行host项目后用yarn的在vscode的终端输入"yarn start"。即可生成页面展示项目。

【本文地址】

公司简介

联系我们